<template>
  <div class="main_box" style="padding:10px;">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{ this.pageState }}任 务</h2>
        <el-button
          type="success"
          size="small"
          plain
          icon="fa fa-mail-forward"
          @click="returnList"
        >
          返 回</el-button
        >
      </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="roleRules"
      >
        <el-row>
          <el-form-item label="任务名称" prop="taskName">
            <el-input
              placeholder="请输入任务名称"
              v-model="dataForm.taskName"
              @keydown.native="keydown($event)"
            ></el-input>
          </el-form-item>

          <el-form-item label="任务内容" prop="taskContent">
            <el-input
              placeholder="请输入任务内容"
              v-model="dataForm.taskContent"
              @keydown.native="keydown($event)"
            ></el-input>
          </el-form-item>

          <el-form-item label="任务地点" prop="taskLocation">
            <el-input
              placeholder="请输入任务地点"
              v-model="dataForm.taskLocation"
              @keydown.native="keydown($event)"
            ></el-input>
          </el-form-item>

          <el-form-item label="所需人数" prop="peopleNumber">
            <el-input
              type="number"
              placeholder="请输入所需人数"
              v-model="dataForm.peopleNumber"
            ></el-input>
          </el-form-item>

          <el-form-item label="任务紧急程度" prop="busyLevel">
            <el-select
              v-model="dataForm.busyLevel"
              placeholder="请选择紧急程度"
            >
              <el-option
                v-for="item in busyLevelList"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="任务种类" prop="taskType">
            <el-select v-model="dataForm.taskType" placeholder="请选择任务种类">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="任务类型" prop="taskKind">
            <el-select v-model="dataForm.taskKind" placeholder="请选择任务类型">
              <el-option
                v-for="item in kindList"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="任务状态" prop="taskState">
            <el-select
              v-model="dataForm.taskState"
              placeholder="请选择任务状态"
            >
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系人手机号" prop="linkPhone">
            <el-input
              placeholder="请输入联系人手机号"
              v-model="dataForm.linkPhone"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系人名称" prop="linkName">
            <el-input
              placeholder="请输入联系人名称"
              v-model="dataForm.linkName"
              @keydown.native="keydown($event)"
            ></el-input>
          </el-form-item>
          <el-form-item label="薪酬" prop="emolument">
            <el-input
              style="width:300px"
              type="number"
              placeholder="请输入薪酬"
              v-model.number="dataForm.emolument"
            ></el-input>
            <p
              style="color: red;
    font-size: 10px;
    position: relative;
    top: -11px;
    width: 315px;"
            >
              时间x点-x点 补贴（车费，餐费等）/一口价（xx元/小时）
            </p>
          </el-form-item>
          <el-form-item label="任务日期" prop="taskDate">
            <el-date-picker
              style="width:360px"
              @change="changeTaskDate()"
              v-model="dataForm.taskDate"
              :clearable="true"
              type="datetimerange"
              range-separator="至"
              start-placeholder="任务开始日期"
              end-placeholder="任务结束日期"
              value-format="yyyy-MM-dd hh:ss:mm"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="报名日期" prop="taskSignDate">
            <el-date-picker
              style="width:360px"
              @change="changeTaskSignDate()"
              v-model="dataForm.taskSignDate"
              :clearable="true"
              type="datetimerange"
              range-separator="至"
              start-placeholder="报名开始日期"
              end-placeholder="报名结束日期"
              value-format="yyyy-MM-dd hh:ss:mm"
            ></el-date-picker>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button plain type="success" round @click="sureClick()"
              >保 存</el-button
            >
            <el-button plain type="info" round @click="returnList"
              >取 消</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import taskApi from "@/api/sample/task";

export default {
  data() {
    return {
      pageState: "新 增 ",
      dataForm: {
        //任务Id
        taskId: "",
        //任务名称
        taskName: "",
        //任务内容
        taskContent: "",
        //任务地址
        taskLocation: "",
        //所需人数
        peopleNumber: "",

        //任务时间
        taskDate: "",
        //任务开始时间
        taskStartDate: "",

        //任务结束时间
        taskEndDate: "",

        //薪酬
        emolument: "",
        //紧急程度
        busyLevel: "",
        //任务种类
        taskType: "",
        //任务类型
        taskKind: "",
        //任务状态
        taskState: "",
        //联系人手机号
        linkPhone: "",
        //联系人名称
        linkName: "",

        //报名时间
        taskSignDate: "",
        //报名开始时间
        signStartDate: "",
        //报名结束时间
        signEndDate: ""
      },
      roleRules: {
        taskName: [
          {
            required: true,
            message: "请输入任务名称",
            trigger: "blur"
          }
        ],
        taskContent: [
          {
            required: true,
            message: "请输入任务内容",
            trigger: "blur"
          }
        ],
        taskLocation: [
          {
            required: true,
            message: "请输入任务地点",
            trigger: "blur"
          }
        ],
        peopleNumber: [
          {
            required: true,
            message: "请输入所需人数",
            trigger: "blur"
          },
        ],
        taskDate: [
          {
            required: true,
            message: "请选择任务日期",
            trigger: "blur"
          }
        ],
        emolument: [
          {
            required: true,
            message: "请输入薪酬",
            trigger: "blur"
          }
        ],
        busyLevel: [
          {
            type: "number",
            required: true,
            message: "请选择任务紧急程度",
            trigger: ["blur", "change"]
          }
        ],
        taskType: [
          {
            type: "number",
            required: true,
            message: "请选择任务种类",
            trigger: ["blur", "change"]
          }
        ],
        taskKind: [
          {
            type: "number",
            required: true,
            message: "请选择任务类型",
            trigger: ["blur", "change"]
          }
        ],
        taskState: [
          {
            type: "number",
            required: true,
            message: "请选择任务状态",
            trigger: ["blur", "change"]
          }
        ],
        linkPhone: [
          {
            required: true,
            message: "请输入联系人手机号",
            trigger: "blur"
          },
          {
            pattern:  /^1(3|4|5|6|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur"
          }
        ],
        linkName: [
          {
            required: true,
            message: "请输入联系人名称",
            trigger: "blur"
          }
        ]
      },
      stateList: [
        { lable: "待开启", value: 1 },
        { lable: "报名中", value: 2 },
        { lable: "已结束", value: 3 }
      ],
      typeList: [
        { lable: "单采", value: 1 },
        { lable: "混采", value: 2 }
      ],
      kindList: [
        { lable: "人员", value: 1 },
        { lable: "环境", value: 2 }
      ],
      busyLevelList: [
        { lable: "正常", value: 1 },
        { lable: "紧急", value: 2 }
      ]
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$Utils.clearData(this.dataForm);
      if (this.$route.query.id) {
        this.dataForm.taskId = this.$route.query.id;
        this.getData();
        this.pageState = "编 辑 ";
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    changeTaskDate() {
      console.log("taskDate", this.dataForm.taskDate);
      this.dataForm.taskStartDate = this.dataForm.taskDate[0];
      this.dataForm.taskEndDate = this.dataForm.taskDate[1];
      console.log("taskStartDate", this.dataForm.taskStartDate);
      console.log("taskEndDate", this.dataForm.taskEndDate);
    },
    changeTaskSignDate() {
      console.log("taskSignDate", this.dataForm.taskSignDate);
      this.dataForm.signStartDate = this.dataForm.taskSignDate[0];
      this.dataForm.signEndDate = this.dataForm.taskSignDate[1];
      console.log("signStartDate", this.dataForm.signStartDate);
      console.log("signEndDate", this.dataForm.signEndDate);
    },
    sureClick() {
      // 提交
      let _this = this;
      _this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.dataForm.taskId) {
            _this
              .$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT)
              .then(() => {
                this.editData();
              });
          } else {
            _this
              .$confirm(message.MSG_CONFIRM_SAVE_ADD, message.TITLE_PROMPT)
              .then(() => {
                this.addData();
              });
          }
        }
      });
    },
    getData() {
      // 修改时获取数据
      taskApi.getTask({ id: this.$route.query.id }).then(res => {
        console.log(res.data);
        this.$Utils.bindingBean(this.dataForm, res.data);
      });
    },
    editData() {
      // 编辑
      let _this = this;
      let cond = {
        //任务Id
        taskId: _this.dataForm.taskId,
        //任务名称
        taskName: _this.dataForm.taskName,
        //任务内容
        taskContent: _this.dataForm.taskContent,
        //任务地址
        taskLocation: _this.dataForm.taskLocation,
        //所需人数
        peopleNumber: _this.dataForm.peopleNumber,

        //任务开始时间
        taskStartDate: _this.dataForm.taskStartDate,
        //任务结束时间
        taskEndDate: _this.dataForm.taskEndDate,

        //薪酬
        emolument: _this.dataForm.emolument,
        //紧急程度
        busyLevel: _this.dataForm.busyLevel,
        //任务种类
        taskType: _this.dataForm.taskType,
        //任务类型
        taskKind: _this.dataForm.taskKind,
        //任务状态
        taskState: _this.dataForm.taskState,
        //联系人手机号
        linkPhone: _this.dataForm.linkPhone,
        //联系人名称
        linkName: _this.dataForm.linkName,
        //报名开始时间
        signStartDate: _this.dataForm.signStartDate,
        //报名结束时间
        signEndDate: _this.dataForm.signEndDate
      };
      console.log("修改参数", cond);
      taskApi.editTask(cond).then(data => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    addData() {
      // 新增
      let _this = this;
      let cond = {
        //任务名称
        taskName: _this.dataForm.taskName,
        //任务内容
        taskContent: _this.dataForm.taskContent,
        //任务地址
        taskLocation: _this.dataForm.taskLocation,
        //所需人数
        peopleNumber: _this.dataForm.peopleNumber,

        //任务开始时间
        taskStartDate: _this.dataForm.taskStartDate,
        //任务结束时间
        taskEndDate: _this.dataForm.taskEndDate,

        //薪酬
        emolument: _this.dataForm.emolument,
        //紧急程度
        busyLevel: _this.dataForm.busyLevel,
        //任务种类
        taskType: _this.dataForm.taskType,
        //任务类型
        taskKind: _this.dataForm.taskKind,
        //任务状态
        taskState: _this.dataForm.taskState,
        //联系人手机号
        linkPhone: _this.dataForm.linkPhone,
        //联系人名称
        linkName: _this.dataForm.linkName,

        //报名开始时间
        signStartDate: _this.dataForm.signStartDate,
        //报名结束时间
        signEndDate: _this.dataForm.signEndDate
      };
      console.log("新增参数", cond);

      taskApi.addTask(cond).then(data => {
        console.log(data);
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },

    returnList() {
      // 返回
      this.$store.dispatch("delView", this.$route);
      this.$router.push("/sample/sampleNurseTask");
    }
  }
};
</script>

<style lang="scss" src="@/assets/css/views/add.scss" scope></style>
